<template>
    <!-- 气泡HTML -->
    <div ref="CustomInfoBox" class="CustomInfoBox" v-if="infoVisible">
        <div class="bubble-tools">
            <span class="bubble-title">{{ title }}</span>
            <span title="关闭" class="bubble-close" @click="close()">x</span>
        </div>
        <div class="bubble-info">
            <table>
                <tr v-for="(item, index) in info" :key="index">
                    <td>{{ item[0] }}</td>
                    <td>{{ item[1] }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CustomInfoBox",
        //import引入的组件需要注入到对象中才能使用",
        components: {},
        props: {
            title: {
                type: String,
                default: "属性"
            },
            lng: String,
            lat: String,
            height: {type: String, default: "40"},
            info: Array,
            id: {type: String, default: "CustomInfoBox"}
        },
        //监控data中的数据变化",
        watch: {},
        data() {
            return {
                infoVisible: true
                // viewer: null,
                // scene: null,
                // postRender: null
            };
        },
        //监听属性 类似于data概念",
        computed: {},
        //方法集合",
        methods: {
            CustomInfoBox() {
                this.$nextTick(() => {
                    let viewer = window.viewer;
                    let entity = viewer.entities.add({
                        id: this.title,
                        position: Cesium.Cartesian3.fromDegrees(Number(this.lng), Number(this.lat)),
                        point: {
                            color: Cesium.Color.SKYBLUE,
                            pixelSize: 12,
                            outlineColor: Cesium.Color.YELLOW,
                            outlineWidth: 3,
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                        }
                    });
                    // let height = Cesium.Cartesian3.fromDegrees(
                    //   entity.position._value.x,
                    //   entity.position._value.y,
                    //   entity.position._value.z
                    // ).z;
                    // console.log(height);
                    //
                    this.bubbleInit(entity.position._value);
                });
            },
            bubbleInit(entityPosition) {
                // let infoboxContainer = document.getElementById(this.id);
                //CustomInfoBox
                let infoboxContainer = this.$refs.CustomInfoBox;
                let scene = window.viewer.scene;
                let postRender = window.viewer.scene.postRender;
                let scenePosition = entityPosition;
                const _this = this;
                postRender.addEventListener(function () {
                    // 每一帧都去计算气泡的正确位置
                    if (scenePosition) {
                        let canvasHeight = scene.canvas.height;
                        let windowPosition = new Cesium.Cartesian2();
                        Cesium.SceneTransforms.wgs84ToWindowCoordinates(
                            scene,
                            scenePosition,
                            windowPosition
                        );
                        infoboxContainer.style.bottom =
                            canvasHeight - windowPosition.y + Number(_this.height) + "px";
                        infoboxContainer.style.left = windowPosition.x + "px";
                    }
                });
            },
            close() {
                this.infoVisible = false;
                window.viewer.trackedEntity = undefined;
                window.viewer.entities.removeById(this.title);
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {
        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {
        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {
            this.CustomInfoBox();
        },
        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {
        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {
        },
        //生命周期 - 销毁之前",
        beforeDestroy() {
            this.close();
        },
        destroyed() {
        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {
        }
    };
</script>

<style scoped>
    .CustomInfoBox {
        position: fixed;
        min-width: 300px;
        overflow: hidden;
        color: white;
        z-index: 1000;
        /*background-color: rgba(17, 131, 255,.6);*/
        /*border: darkblue 1px solid;*/
        padding: 20px 30px;
        background: linear-gradient(to left, #ffffff, #ffffff) left top no-repeat,
        linear-gradient(to bottom, #ffffff, #ffffff) left top no-repeat,
        linear-gradient(to left, #ffffff, #ffffff) right top no-repeat,
        linear-gradient(to bottom, #ffffff, #ffffff) right top no-repeat,
        linear-gradient(to left, #ffffff, #ffffff) left bottom no-repeat,
        linear-gradient(to bottom, #ffffff, #ffffff) left bottom no-repeat,
        linear-gradient(to left, #ffffff, #ffffff) right bottom no-repeat,
        linear-gradient(to left, #ffffff, #ffffff) right bottom no-repeat,
        rgba(17, 131, 255, 0.5);
        background-size: 3px 20px, 20px 3px, 3px 20px, 20px 3px;
    }

    .bubble-tools {
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }

    .bubble-title {
        color: rgb(241, 141, 93);
        font-size: 25px;
        margin-bottom: 10px;
    }

    .bubble-info {
        width: 100%;
        overflow: hidden;
        font-size: 18px;
    }

    .bubble-close {
        color: white;
        cursor: pointer;
        border: 1px white solid;
        width: 20px;
        height: 20px;
        text-align: center;
    }

    .bubble-close:hover {
        background-color: rgba(255, 255, 255, 0.6);
        color: black;
    }
</style>
